@section head{
    <link href="~/theme/default/syssetting/sysrole.index.css" rel="stylesheet" asp-append-version="true"/>
}
<div class="zb-flex-1 zb-flex zb-flex-column zb-w">
    <div class="zb-query-frame">

        <div class="query-block">
            <span>角色编号：</span>
            <el-input placeholder="请输入角色编号"
                      v-model="query.roleNo"
                      size="mini">
            </el-input>
        </div>

        <div class="query-block">
            <span>角色名称：</span>
            <el-input placeholder="请输入角色名称"
                      v-model="query.roleName"
                      size="mini">
            </el-input>
        </div>

        <div class="query-block">
            <el-button type="primary"
                       icon="el-icon-search"
                       @@click="onQuery"
                       size="mini">查询</el-button>
        </div>
    </div>
    <div class="zb-func-frame">
        <el-button :icon="button.act_icon"
                   :key="button.act_no"
                   @@click="handleButton(button.act_no)"
                   v-for="button in buttons.topOp"
                   size="mini">
            <span v-text="button.act_name"></span>
        </el-button>
    </div>
    <el-table :data="tableData.records"
              height="250"
              border
              class="zb-border-no"
              ref="tblRecords"
              style="width: 100%"
              @@select="onRowSelect"
              size="mini">
        <el-table-column type="selection"
                         class-name="table-checkbox-th"
                         width="45"
                         align="center"
                         fixed="left">
        </el-table-column>
        <el-table-column type="index"
                         width="50"
                         align="center"
                         title="序号"
                         :index="recordIndex"
                         fixed="left">
        </el-table-column>

        <el-table-column prop="role_no"
                         label="角色编号"
                         width="180">
        </el-table-column>

        <el-table-column prop="role_name"
                         label="角色名称"
                         width="180">
        </el-table-column>

        <el-table-column prop="role_desc"
                         label="角色描述">
        </el-table-column>
        <el-table-column fixed="right"
                         label=" "
                         width="125">
            <template slot-scope="scope">
                <el-button :icon="button.act_icon"
                           :key="button.act_no"
                           @@click="handleButton(button.act_no, scope.row)"
                           v-for="button in buttons.rowOp"
                           circle
                           size="mini">
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next, jumper, total"
                   :page-size="query.page_size"
                   :total="tableData.total"
                   @@current-change="onPageChange">
    </el-pagination>
    <zb-edit :options="edit" ref="edit"></zb-edit>
    <el-drawer :title="'角色【'+powerInfo.roleNo+'】的权限设定'"
               :visible.sync="powerInfo.visible"
               direction="rtl">
        <el-tree :data="powerInfo.data"
                 ref="tree"
                 show-checkbox
                 v-model="powerInfo.value"
                 :default-expand-all="true"
                 node-key="menu_no"
                 :props="{label:'menu_name'}"
                 :default-checked-keys="powerInfo.checked">
        </el-tree>
        <div class="footer">
            <el-button @@click="powerInfo.visible = false"
                       size="mini">取 消</el-button>
            <el-button type="primary"
                       @@click="grantPowers"
                       size="mini">确 定</el-button>
        </div>
    </el-drawer>
</div>
@section script{
    <script src="~/module/common/form.template.js" type="text/babel"></script>
    <script src="~/module/syssetting/sysrole.index.js" asp-append-version="true" type="text/babel"></script>
}
